iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
Modern Web

初學者對於做購物車系統的分析系列 第 24

Day 24-製作購物車之設計主畫面

  • 分享至 

  • xImage
  •  

繼昨天完成SideDrawer等,今天要來呈現HomeScreen&ProductScreen。
設計的部分就不多做分析,主要呈現實作成果。

以下內容有參考教學影片,底下有附網址。
(內容包括我的不專業解說分析及在實作過程中遇到的困難與解決)


要把product放到主頁面(HomeScreen),先在component資料夾裡新增Product.js&Product.css
https://ithelp.ithome.com.tw/upload/images/20210926/20139720ySc9ckiJ3L.png
https://ithelp.ithome.com.tw/upload/images/20210926/20139720WAhMD9mtsv.png
https://ithelp.ithome.com.tw/upload/images/20210926/20139720Uo6xzs0fvn.png

設定好後,就來設定HomeScreen的部分
HomeScreen.js:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720pEC7McdnRu.png
HomeScreen.css:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720VOUW8Vtqeq.png

接下來換ProductScreen的部分
ProductScreen.js:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720K64jPIrXei.png
https://ithelp.ithome.com.tw/upload/images/20210926/20139720AwwTa9u6Sv.png
ProductScreen.css:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720rJsR5e2piV.png
https://ithelp.ithome.com.tw/upload/images/20210926/20139720TqOSCkaeXv.png
https://ithelp.ithome.com.tw/upload/images/20210926/20139720aGCpVLgVym.png

都完成後,接下來就是執行看看成果啦
HomeScreen部分:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720NknlxMV0XD.png
ProductScreen部分:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720AWrSIY8Wm1.png


參考教學網站:https://www.youtube.com/watch?v=0divhP3pEsg&t=786s


  • 明天是設計購物車的部分/images/emoticon/emoticon29.gif

上一篇
Day 23-製作購物車之設計SideDrawer&Backdrawer
下一篇
Day 25-製作購物車之設計購物車畫面
系列文
初學者對於做購物車系統的分析30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言